<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>所有组件</title>
    <meta name="format-detection" content="telephone=no">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-title" content="">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="description" content="">
    <link rel="stylesheet" href="./css/index.css" type="text/css" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" type="text/css" />
    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="./iconexp/iconfont.js" type="text/javascript"></script>
</head>
<body>
    <!-- 个人中心 001 -->
    <div class="pui_user" style="display: none;">
        <div class="p_center">
            <div class="p_logo">
                <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/TB1li8oRpXXXXcvaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg_.webp" />
            </div>
        </div>
    </div>
    <br/>
    <!-- 伪瀑布流 -->
    <div class="pui_pubu">
    <ul>
      <li>
          <a href="javascript:void(0)">
              <div class="p_media">
                  <img src="https://aecpm.alicdn.com/simba/img/TB1X6uHLVXXXXcCXVXXSutbFXXX.jpg"/>
              </div>
              <div class="p_title">
                  <span>中化人领导人人人人人人人人人中化人领导人人人人人人人人人中化人领导人人人人人人人人人中化人领导人人人人人人人人人</span>
              </div>
          </a>
          <div class="p_attr">
              <div class="p_left">
                <div class="p_img">
                    <img src="https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_300x300.jpg"/>
                </div>
              </div>
              <div class="p_right">
              <span class="p_par">4.01km·51分钟前</span>
              </div>
          </div>
          <div class="p_btns">
              <a href="javascript:void(0)" class="p_like">
                  <i class="icon iconfont icon-shouye"></i><span>赞</span>
              </a>
              <a href="javascript:void(0)" class="p_rate">
                  <i class="icon iconfont icon-shouye"></i><span>评论</span>
              </a>
          </div>
      </li>
      <li>
          <a href="javascript:void(0)">
              <div class="p_media">
                  <img src="https://aecpm.alicdn.com/simba/img/TB1X6uHLVXXXXcCXVXXSutbFXXX.jpg"/>
              </div>
              <div class="p_title">
                  <span>中化人领导人人人人人人人人人中化人领导人人人人人人人人人中化人领导人人人人人人人人人中化人领导人人人人人人人人人</span>
              </div>
          </a>
          <div class="p_attr">
              <div class="p_left">
                <div class="p_img">
                    <img src="https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_300x300.jpg"/>
                </div>
              </div>
              <div class="p_right">
              <span class="p_par">4.01km·51分钟前</span>
              </div>
          </div>
          <div class="p_btns">
              <a href="javascript:void(0)" class="p_like">
                  <i class="icon iconfont icon-shouye"></i><span>赞</span>
              </a>
              <a href="javascript:void(0)" class="p_rate">
                  <i class="icon iconfont icon-shouye"></i><span>评论</span>
              </a>
          </div>
      </li>
      <li>
          <a href="javascript:void(0)">
              <div class="p_media">
                  <img src="https://aecpm.alicdn.com/simba/img/TB1X6uHLVXXXXcCXVXXSutbFXXX.jpg"/>
              </div>
              <div class="p_title">
                  <span>中化人领导人人人人人人人人人中化人领导人人人人人人人人人中化人领导人人人人人人人人人中化人领导人人人人人人人人人</span>
              </div>
          </a>
          <div class="p_attr">
              <div class="p_left">
                <div class="p_img">
                    <img src="https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_300x300.jpg"/>
                </div>
              </div>
              <div class="p_right">
              <span class="p_par">4.01km·51分钟前</span>
              </div>
          </div>
          <div class="p_btns">
              <a href="javascript:void(0)" class="p_like">
                  <i class="icon iconfont icon-shouye"></i><span>赞</span>
              </a>
              <a href="javascript:void(0)" class="p_rate">
                  <i class="icon iconfont icon-shouye"></i><span>评论</span>
              </a>
          </div>
      </li>
      <li>
          <a href="javascript:void(0)">
              <div class="p_media">
                  <img src="https://aecpm.alicdn.com/simba/img/TB1X6uHLVXXXXcCXVXXSutbFXXX.jpg"/>
              </div>
              <div class="p_title">
                  <span>中化人领导人人人人人人人人人中化人领导人人人人人人人人人中化人领导人人人人人人人人人中化人领导人人人人人人人人人</span>
              </div>
          </a>
          <div class="p_attr">
              <div class="p_left">
                <div class="p_img">
                    <img src="https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_300x300.jpg"/>
                </div>
              </div>
              <div class="p_right">
              <span class="p_par">4.01km·51分钟前</span>
              </div>
          </div>
          <div class="p_btns">
              <a href="javascript:void(0)" class="p_like">
                  <i class="icon iconfont icon-shouye"></i><span>赞</span>
              </a>
              <a href="javascript:void(0)" class="p_rate">
                  <i class="icon iconfont icon-shouye"></i><span>评论</span>
              </a>
          </div>
      </li>
    </ul>
    </div>
    <br/>
    <!-- 最新评论 -->
    <div class="pui_ratelist">
        <div class="p_hd">
            <span>最新评论(6)</span>
        </div>
        <ul class="p_ul">
            <li class="p_li">
                <div class="p_left">
                    <div class="p_img">
                        <a href="javascript:void(0)">
                            <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/TB1li8oRpXXXXcvaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg_.webp" />
                        </a>
                    </div>
                </div>
                <div class="p_right">
                    <a href="javascript:void(0)" class="p_l">
                        <div class="p_row">
                            <span class="p_name">快乐</span>
                            <div class="pui_labels">
                                <div class="p_lb pui_bg_pink"> <i class="icon iconfont icon-shouye"></i>
                                    <span>23</span>
                                </div>
                                <div class="p_lb pui_bg_orange"> <i class="icon iconfont icon-shouye"></i>
                                    <span>SVIP3</span>
                                </div>
                            </div>
                        </div>
                        <div class="p_row">
                            <div class="p_con">
                                <span>回复 快乐：</span>
                                <span>森要要要要</span>
                            </div>
                        </div>
                        <div class="p_row">
                            <div class="p_attr">
                                <span>26分钟前·2589km</span>
                            </div>
                        </div>
                    </a>
                    <div class="p_r">
                        <div class="p_zan">
                            <i class="icon iconfont icon-shouye"></i>
                            <sapn>赞</sapn>
                        </div>
                    </div>
                </div>
            </li>
            <li class="p_li">
                <div class="p_left">
                    <div class="p_img">
                        <a href="javascript:void(0)">
                            <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/TB1li8oRpXXXXcvaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg_.webp" />
                        </a>
                    </div>
                </div>
                <div class="p_right">
                    <a href="javascript:void(0)" class="p_l">
                        <div class="p_row">
                            <span class="p_name">快乐</span>
                            <div class="pui_labels">
                                <div class="p_lb pui_bg_pink"> <i class="icon iconfont icon-shouye"></i>
                                    <span>23</span>
                                </div>
                                <div class="p_lb pui_bg_orange"> <i class="icon iconfont icon-shouye"></i>
                                    <span>SVIP3</span>
                                </div>
                            </div>
                        </div>
                        <div class="p_row">
                            <div class="p_con">
                                <span>回复 快乐：</span>
                                <span>森要要要要</span>
                            </div>
                        </div>
                        <div class="p_row">
                            <div class="p_attr">
                                <span>26分钟前·2589km</span>
                            </div>
                        </div>
                    </a>
                    <div class="p_r">
                        <div class="p_zan">
                            <i class="icon iconfont icon-shouye"></i>
                            <sapn>赞</sapn>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <br/>
    <!-- 文字列表 -->
    <div class="pui_list1">
        <ul class="p_ul">
            <li class="p_li">
                <a href="javascript:void(0)">
                    <div class="p_left">
                        <i class="icon iconfont icon-shouye"></i>
                        <span class="p_h1">附近的群组</span>
                    </div>
                    <div class="p_right">
                        <span class="p_h1">今日新帖792条</span>
                    </div>
                </a>
            </li>
            <li class="p_li">
                <a href="javascript:void(0)">
                    <div class="p_left">
                        <i class="icon iconfont icon-shouye"></i>
                        <span class="p_h1">附近的群组</span>
                    </div>
                    <div class="p_right">
                        <span class="p_h1">今日新帖792条</span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <br/>
    <!-- 消息提示 -->
    <div class="pui_nav">
        <ul class="p_ul">
            <li class="p_li">
                <a href="javascript:void(0)">
                    <span class="p_num">23</span><br/>
                    <span class="p_label">好友</span>
                </a>
            </li>
            <li class="p_li">
                <a href="javascript:void(0)">
                    <span class="p_num">23</span><br/>
                    <span class="p_label">好友</span>
                </a>
            </li>
            <li class="p_li">
                <a href="javascript:void(0)">
                    <span class="p_num">56</span><br/>
                    <span class="p_label">好友</span>
                </a>
            </li>
            <li class="p_li">
                <a href="javascript:void(0)">
                    <span class="p_num">88</span><br/>
                    <span class="p_label">好友</span>
                </a>
            </li>
        </ul>
    </div>
    <br/>
    <!-- 陌陌标题 -->
    <div class="pui_header">
        <div class="p_left">
            <ul>
                <li>
                    <a href="javascript:void(0)">视频</a>
                </li>
                <li class="slt">
                    <a href="javascript:void(0)">我们</a>
                </li>
                <li>
                    <a href="javascript:void(0)">动态</a>
                </li>
            </ul>
        </div>
        <div class="p_right">
            <ul>
                <li>
                    <a href="javascript:void(0)"><i class="icon iconfont icon-shouye"></i></a>
                </li>
                <li>
                    <a href="javascript:void(0)"><i class="icon iconfont icon-shouye"></i></a>
                </li>
            </ul>
        </div>
    </div>
    <br/>
    <!-- 陌陌标题1 -->
    <div class="pui_header1">
        <a href="javascript:void(0)" class="p_left">
            <i class="icon iconfont icon-shouye"></i>
        </a>
        <div class="p_center">
            <span>个人动态</span>
        </div>
        <a href="javascript:void(0)" class="p_right">
            <i class="icon iconfont icon-shouye"></i>
        </a>
    </div>
    <br/>
    <br/>
    <!-- 陌陌动态 -->
    <div>
        <ul class="pui_dynamic">
            <li>
                <div class="p_wrap">
                    <div class="p_hd">
                        <div class="p_left">
                            <div class="p_logo">
                                <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/TB1li8oRpXXXXcvaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg_.webp">
                            </div>
                            <div class="p_attr">
                                <div class="p_name">马云</div>
                                <div class="pui_labels">
                                    <div class="p_lb pui_bg_pink">
                                        <i class="icon iconfont icon-shouye"></i><span>23</span>
                                    </div>
                                    <div class="p_lb pui_bg_orange">
                                        <i class="icon iconfont icon-shouye"></i>
                                        <span>SVIP3</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="p_right">
                            <div class="p_time">08:11</div>
                        </div>
                    </div>
                    <div class="p_con">
                        <a href="javascript:void(0)">高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，高淳准备走起，</a>
                    </div>
                    <div class="p_imgs">

                        <div class="p_img">
                            <div class="p_imgbox">
                                <img src="https://img.alicdn.com/tps/TB1UTY.KXXXXXa0XXXXXXXXXXXX-180-400.jpg_200x200.jpg">
                            </div>
                        </div>
                        <div class="p_img">
                            <div class="p_imgbox">
                                <img src="https://img.alicdn.com/tps/TB1UTY.KXXXXXa0XXXXXXXXXXXX-180-400.jpg_200x200.jpg">
                            </div>
                        </div>
                        <div class="p_img">
                            <div class="p_imgbox">
                                <img src="https://img.alicdn.com/tps/TB1UTY.KXXXXXa0XXXXXXXXXXXX-180-400.jpg_200x200.jpg">
                            </div>
                        </div>
                        <div class="p_img">
                            <div class="p_imgbox">
                                <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/TB1li8oRpXXXXcvaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg_.webp">
                            </div>
                        </div>
                        <div class="p_img">
                            <div class="p_imgbox">
                                <img src="https://img.alicdn.com/tps/TB1UTY.KXXXXXa0XXXXXXXXXXXX-180-400.jpg_200x200.jpg">
                            </div>
                        </div>
                        <div class="p_img">
                            <div class="p_imgbox">
                                <img src="https://img.alicdn.com/tfs/TB1D4EnSpXXXXcLXpXXXXXXXXXX-520-280.jpg_q90_.webp">
                            </div>
                        </div>
                        <div class="p_img">
                            <div class="p_imgbox">
                                <img src="https://img.alicdn.com/tps/TB1UTY.KXXXXXa0XXXXXXXXXXXX-180-400.jpg_200x200.jpg">
                            </div>
                        </div>
                        <div class="p_img">
                            <div class="p_imgbox">
                                <img src="https://img.alicdn.com/tps/TB1UTY.KXXXXXa0XXXXXXXXXXXX-180-400.jpg_200x200.jpg">
                            </div>
                        </div>
                        <div class="p_img">
                            <div class="p_imgbox">
                                <img src="https://img.alicdn.com/tps/TB1UTY.KXXXXXa0XXXXXXXXXXXX-180-400.jpg_200x200.jpg">
                            </div>
                        </div>
                        <div class="p_num">
                            <i class="icon iconfont icon-shouye"></i><span>6</span>
                        </div>
                    </div>
                    <div class="p_place">
                        <img src="img/position.png"><div class="p_label">人民广场</div>
                    </div>
                    <div class="p_par">
                        <a href="">
                            <span>2.30km</span>
                            <span>3赞</span>
                            <span>5评论</span>
                            <span>14阅读</span>
                        </a>
                    </div>
                    <div class="p_btns">
                        <div class="p_left">
                            <i class="icon iconfont icon-shouye"></i>
                            <i class="icon iconfont icon-shouye"></i>
                        </div>
                        <div class="p_right">
                            <i class="icon iconfont icon-shouye"></i>
                        </div>
                    </div>
                    <div class="p_corner">
                        <i class="icon iconfont icon-shouye"></i>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <br/>
    <!-- 陌陌 人 -->
    <div>
        <div class="pui_peopel">
            <ul>
                <li>
                    <a href="javascript:void(0)">
                        <div class="p_left">
                            <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/TB1li8oRpXXXXcvaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg_.webp">
                        </div>
                        <div class="p_right">
                            <div class="p_row">
                                <div class="p_l">
                                    <span>快乐</span>
                                </div>
                                <div class="p_r">
                                    <span>0.04km·8分钟前</span>
                                </div>
                            </div>
                            <div class="p_row">
                                <div class="p_l">
                                    <div class="pui_labels">
                                        <div class="p_lb pui_bg_pink">
                                            <i class="icon iconfont icon-shouye"></i><span>23</span>
                                        </div>
                                        <div class="p_lb pui_bg_orange">
                                            <i class="icon iconfont icon-shouye"></i>
                                            <span>SVIP3</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="p_row">
                                <div class="p_l">

                                    <span class="p_suo"><i class="icon iconfont icon-shouye"></i>印记：他注册陌陌超过4年他注册陌陌超过4年</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <div class="p_left">
                            <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/TB1li8oRpXXXXcvaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg_.webp">
                        </div>
                        <div class="p_right">
                            <div class="p_row">
                                <div class="p_l">
                                    <span>快乐</span>
                                </div>
                                <div class="p_r">
                                    <span>0.04km·8分钟前</span>
                                </div>
                            </div>
                            <div class="p_row">
                                <div class="p_l">
                                    <div class="pui_labels">
                                        <div class="p_lb pui_bg_pink">
                                            <i class="icon iconfont icon-shouye"></i><span>23</span>
                                        </div>
                                        <div class="p_lb pui_bg_orange">
                                            <i class="icon iconfont icon-shouye"></i>
                                            <span>SVIP3</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="p_row">
                                <div class="p_l">

                                    <span class="p_suo"><i class="icon iconfont icon-shouye"></i>印记：他注册陌陌超过4年他注册陌陌超过4年</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <br/>
    <!-- 陌陌 右上角发布按钮 -->
    <div>
        <div class="pui_release">
            <ul>
                <li>
                    <a href="javascript:void(0)">
                        <i class="icon iconfont pui_cl_red">&#xe64f;</i>
                        <span>视频</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="icon iconfont pui_cl_blue1">&#xe64f;</i>
                        <span>图片</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="icon iconfont pui_cl_orange">&#xe64f;</i>
                        <span>更多</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <br/>
    <!-- 陌陌 评论动态框 -->
    <div>
        <div class="pui_ratebox">
            <div class="p_left">
                <a href="">
                    <i class="icon iconfont icon-shouye"></i>
                </a>
            </div>
            <div class="p_center">
                <input placeholder="输入评论" value="" type="text"/>
            </div>
            <div class="p_right">
                <a href="javascript:void(0)">
                    <span>评论</span>
                </a>
            </div>
        </div>
        <!-- 表情框 -->
        <div class="pui_expression">
            <ul class="p_con">
                <li>
                    <ul class="p_exp">
                        <li class="p_li6">
                            <svg class="icon-exp" aria-hidden="true">
                                <use xlink:href="#icon-Expression_34"></use>
                            </svg>
                        </li>
                        <li class="p_li6">
                            <svg class="icon-exp" aria-hidden="true">
                                <use xlink:href="#icon-Expression_34"></use>
                            </svg>
                        </li>
                        <li class="p_li6">
                            <svg class="icon-exp" aria-hidden="true">
                                <use xlink:href="#icon-Expression_34"></use>
                            </svg>
                        </li>
                        <li class="p_li6">
                            <svg class="icon-exp" aria-hidden="true">
                                <use xlink:href="#icon-Expression_34"></use>
                            </svg>
                        </li>
                        <li class="p_li6">
                            <svg class="icon-exp" aria-hidden="true">
                                <use xlink:href="#icon-Expression_34"></use>
                            </svg>
                        </li>
                        <li class="p_li6">
                            <svg class="icon-exp" aria-hidden="true">
                                <use xlink:href="#icon-Expression_34"></use>
                            </svg>
                        </li>
                        <li class="p_li4">
                            <img src="./img/position.png">
                        </li>
                        <li class="p_li4">
                            <img src="./img/position.png">
                        </li>
                        <li class="p_li4">
                            <img src="./img/position.png">
                        </li>
                        <li class="p_li4">
                            <img src="./img/position.png">
                        </li>
                        <li class="p_li4">
                            <img src="./img/position.png">
                        </li>
                        <li class="p_li4">
                            <img src="./img/position.png">
                        </li>
                        <li class="p_li4">
                            <img src="./img/position.png">
                        </li>
                        <li class="p_li4">
                            <img src="./img/position.png">
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="p_tab">
                <li class="slt">
                    <a href="javascript:void(0)">
                        <i class="icon iconfont icon-shouye"></i>
                        <div class="p_dot">新</div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="icon iconfont icon-shouye"></i>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="icon iconfont icon-shouye"></i>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="icon iconfont icon-shouye"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 陌陌 底部菜单 -->
    <div>
        <div class="pui_menu">
            <ul class="p_ul">
                <li class="p_li p_slt">
                    <a href="javascript:void(0)"> <i class="icon iconfont icon-shouye"></i>
                        <br>
                        <label>赛区</label>
                    </a>
                </li>
                <li class="p_li">
                    <a href="javascript:void(0)"> <i class="icon iconfont icon-shouye"></i>
                        <br>
                        <label>首页</label>
                    </a>
                </li>
                <li class="p_li">
                    <a href="javascript:void(0)">
                        <i class="icon iconfont icon-shouye"></i>
                        <br>
                        <label>排行</label>
                    </a>
                </li>
                <li class="p_li">
                    <a href="javascript:void(0)">
                        <i class="icon iconfont icon-shouye"></i>
                        <br>
                        <label>关注</label>
                    </a>
                    <span class="p_num">569</span>
                </li>
                <li class="p_li">
                    <a href="javascript:void(0)">
                        <i class="icon iconfont icon-shouye"></i>
                        <br>
                        <label>我的</label>
                    </a>
                    <span class="p_dot"></span>
                </li>
            </ul>
        </div>
    </div>
    <br/>
    <!-- textarea -->
    <div class="pui_formline">
        <div class="pui_textarea">
            <textarea rows="4" placeholder="请输入内容"></textarea>
            <div class="p_tips">
                <span>5</span>/<span>100</span>
            </div>
        </div>
    </div>
    <div class="pui_line"></div>
    <!-- pui_imglist -->
    <div class="pui_formline">
        <ul class="pui_imglist">
            <li class="p_li">
                <div class="p_img">
                    <img src="https://img.alicdn.com/tps/TB1UTY.KXXXXXa0XXXXXXXXXXXX-180-400.jpg_200x200.jpg"/>
                </div>
                <div class="p_delete">
                    <i class="icon iconfont icon-shouye"></i>
                </div>
                <div class="p_edit">
                    <span>编缉</span>
                </div>
            </li>
            <li class="p_li">
                <div class="p_img">
                    <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/TB1li8oRpXXXXcvaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg_.webp"/>
                </div>
                <div class="p_delete">
                    <i class="icon iconfont icon-shouye"></i>
                </div>
                <div class="p_edit">
                    <span>编缉</span>
                </div>
            </li>
            <li class="p_li">
                <div class="p_img">
                    <img src="https://img.alicdn.com/imgextra/i1/200/TB2jVDqib4npuFjSZFmXXXl4FXa_!!200-0-yamato.jpg_210x1000q90.jpg"/>
                </div>
                <div class="p_delete">
                    <i class="icon iconfont icon-shouye"></i>
                </div>
                <div class="p_edit">
                    <span>编缉</span>
                </div>
            </li>
            <li class="p_li">
                <div class="p_img">
                    <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/TB1li8oRpXXXXcvaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg_.webp"/>
                </div>
                <div class="p_delete">
                    <i class="icon iconfont icon-shouye"></i>
                </div>
                <div class="p_edit">
                    <span>编缉</span>
                </div>
            </li>
            <li class="p_li">
                <div class="p_img">
                    <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/TB1li8oRpXXXXcvaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg_.webp"/>
                </div>
                <div class="p_delete">
                    <i class="icon iconfont icon-shouye"></i>
                </div>
                <div class="p_edit">
                    <span>编缉</span>
                </div>
            </li>
            <li class="p_li">
                <div class="p_img">
                    <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/TB1li8oRpXXXXcvaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg_.webp"/>
                </div>
                <div class="p_delete">
                    <i class="icon iconfont icon-shouye"></i>
                </div>
                <div class="p_edit">
                    <span>编缉</span>
                </div>
            </li>
            <li class="p_li">
                <div class="p_img">
                    <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/TB1li8oRpXXXXcvaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg_.webp"/>
                </div>
                <div class="p_delete">
                    <i class="icon iconfont icon-shouye"></i>
                </div>
                <div class="p_edit">
                    <span>编缉</span>
                </div>
            </li>
            <li class="p_li">
                <div class="p_img">
                    <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/TB1li8oRpXXXXcvaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg_.webp"/>
                </div>
                <div class="p_delete">
                    <i class="icon iconfont icon-shouye"></i>
                </div>
                <div class="p_edit">
                    <span>编缉</span>
                </div>
            </li>
            <li class="p_li">
                <div class="p_img">
                    <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/TB1li8oRpXXXXcvaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg_.webp"/>
                </div>
                <div class="p_delete">
                    <i class="icon iconfont icon-shouye"></i>
                </div>
                <div class="p_edit">
                    <span>编缉</span>
                </div>
            </li>
            <li class="p_add">
                <i class="icon iconfont icon-shouye"></i>
                <div class="p_tips">
                    <span>5/9</span>
                </div>
            </li>
            <div style="clear: both;"></div>
        </ul>
    </div>
    <div class="pui_line"></div>
    <!-- pui_position -->
    <div class="pui_formline">
        <div class="pui_position">
            <div class="p_left">
                <div class="p_btn">
                    <i class="icon iconfont icon-shouye"></i><span>民生小区</span><i class="icon iconfont icon-shouye"></i>
                </div>
            </div>
            <div class="p_right">
                <div class="p_btn">
                    <span>公开</span>
                    <input value="" type="hidden"/>
                </div>
            </div>
        </div>
    </div>
    <div class="pui_line"></div>
    <!-- pui_bottombtn -->
    <div class="pui_bottombtn">
        <ul class="p_ul">
          <li class="p_li"><a href="javascript:void(0)"><i class="icon iconfont icon-shouye"></i></a></li>
          <li class="p_li"><a href="javascript:void(0)"><i class="icon iconfont icon-shouye"></i></a></li>
          <li class="p_li"><a href="javascript:void(0)"><i class="icon iconfont icon-shouye"></i></a></li>
          <li class="p_li"><a href="javascript:void(0)"><i class="icon iconfont icon-shouye"></i></a></li>
        </ul>
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <!-- ============================================== -->
    <script>
      ;(function(){
        function get_css($elm){
                /*
                  作用：为html标签加上css空样式，省去手写css样式结构麻烦
                  如：将$html，内容如下：
                        <div class="y_r">
                          <div class="y_read">读</div>
                          <div class="y_test">
                            <div class="y_text_s"></div>
                          </div>
                        </div>
                  则得到如下：
                    .y_r{}
                    .y_r .y_read {}
                    .y_r .y_test {}
                    .y_r .y_test .y_text_s {}
                */
                // 获取元素class，没有则获取标签名字
                function get_class($str_html){
                  var r='';
                  var tClass=$str_html.attr('class');
                  if (typeof tClass=='undefined') {
                    tClass='';
                    var r=$str_html.get(0).tagName;
                    return r;
                  }else{
                    if ($.trim(tClass).length<2) {
                      r=$str_html.get(0).tagName;
                      return r;
                    }else{
                      r='.'+tClass;
                      return r;
                    }
                  }
                }
                var css='';
                var class0='.'+$elm.attr('class');
                css+=class0+' '+'{}\r\n';
                var $ch1=$elm.children();
                $ch1.each(function(index, el1) {
                  var class1=get_class($(el1));
                  css+=class0+' '+class1+'{}\r\n';
                  var $ch2=$(el1).children();
                    $ch2.each(function(index, el2) {
                      var class2=get_class($(el2));
                      css+=class0+' '+class1+' '+class2+''+'{}\r\n';
                        var $ch3=$(el2).children();
                        $ch3.each(function(index, el3) {
                          var class3=get_class($(el3));
                          css+=class0+' '+class1+' '+class2+' '+class3+' '+'{}\r\n';
                            var $ch4=$(el3).children();
                            $ch4.each(function(index, el4) {
                              var class4=get_class($(el4));
                              css+=class0+' '+class1+' '+class2+' '+class3+' '+class4+' '+'{}\r\n';
                                var $ch5=$(el4).children();
                                $ch5.each(function(index, el5) {
                                  var class5=get_class($(el5));
                                  css+=class0+' '+class1+' '+class2+' '+class3+' '+class4+' '+class5+' '+'{}\r\n';
                                });
                            });
                        });
                    });
                });
                console.log('<style>\r\n'+css.toLocaleLowerCase()+'</style>');
                return css;
        }
        get_css($('.pui_pubu'));
      })();
    </script>
</body>
</html>